<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import openPanel from '@/assets/bit-screen/schedule-mge/openPanel.png'
import closePanel from '@/assets/bit-screen/schedule-mge/closePanel.png'
import doubleup from '@/assets/bit-screen/schedule-mge/doubleup.png'
import CustomBox from './components/CustomBox.vue'
import AirportInfo from './components/AirportInfo.vue'
import Weather from './components/Weather.vue'
import Video from './components/Video.vue'
import RunLog from './components/RunLog.vue'
import VideoScale from './components/VideoScale.vue'

const router = useRouter()

const drawer = ref(false)
const toggleDrawer = () => {
  drawer.value = !drawer.value
}

const emit = defineEmits<{
  (e: 'parent-event', data: Boolean): void
}>()

const insetUrl =
  'https://vod.play.t-aaron.com/da1b1c30796d71eebfff7035d0b20102/e4c05858dbc94c20ba0ccf9464bd926d-fe8119f756e23f009b954affb89b754b-hd.mp4'

function getConfigOptions(status: string) {
  return {
    id: status,
    width: '100%',
    height: '100%',
    source: insetUrl,
    isLive: false
  }
}
const videoScaleShow = ref<boolean>(false)
const videoScaleConfig = ref<{
  title: string
  id: string
  width: string
  height: string
  source: string
  isLive: boolean
}>({
  title: '内部监控',
  id: 'videoScaleId',
  width: '100%',
  height: '100%',
  source: insetUrl,
  isLive: false
})
// 接收到视频放大需求
const handleScale = (id) => {
  videoScaleShow.value = true

  videoScaleConfig.value.title =
    id === 'inset'
      ? '内部监控'
      : id === 'outside'
        ? '外部监控'
        : id === 'realTime'
          ? '实时监控'
          : ''
}
const closeScale = () => {
  videoScaleShow.value = false
}
</script>
<template>
  <img
    class="side-icon"
    @click="toggleDrawer"
    :class="[drawer ? 'isOpen' : 'isClose']"
    v-if="!drawer"
    :src="openPanel"
    alt=""
  />
  <img
    class="side-icon"
    @click="toggleDrawer"
    :class="[drawer ? 'isOpen' : 'isClose']"
    v-else
    :src="closePanel"
    alt=""
  />
  <div class="backBox" @click="router.push({ path: '/bit-screen/home' })">
    <span>返回</span>
    <img style="width: 14px; margin-left: 5px" :src="doubleup" alt="" />
  </div>
  <div class="lf-con" :class="[drawer ? 'lf-isOpen' : 'lf-isClose']">
    <CustomBox title="机场信息"><AirportInfo /> </CustomBox>
    <Weather />
    <div class="topVideo">
      <Video @video-scale="handleScale" :configOptions="getConfigOptions('outside')" />
    </div>
    <div class="bottomVideo">
      <Video @video-scale="handleScale" :configOptions="getConfigOptions('inset')"></Video>
      <Video @video-scale="handleScale" :configOptions="getConfigOptions('realTime')"></Video>
    </div>
    <VideoScale v-if="videoScaleShow" @close-scale="closeScale" :configOptions="videoScaleConfig" />
    <CustomBox title="运行日志">
      <RunLog />
    </CustomBox>
  </div>
</template>

<style lang="less" scoped>
.lf-isClose {
  z-index: -1;
  width: 0;
  position: absolute;
}
.lf-isOpen {
  width: 19.5%;
  z-index: 2001;
  position: absolute;
  left: 15px;
  top: 38px !important;
  background: rgba(9, 36, 74, 0);
  height: 95%;
  box-shadow: none;
  overflow-y: auto;
}

.side-icon {
  position: absolute;
  z-index: 9999;
  top: 43.8%;
  height: 179px;
  height: 20%;
  transform: translateY(-50%);
  left: 14px;
  cursor: pointer;
}
.isOpen {
  position: absolute;
  left: calc(19.5% + 15px);
  z-index: 9999 !important;
  animation-duration: s;
}
.backBox {
  position: absolute;
  z-index: 8888;
  width: 78px;
  height: 26px;
  background: rgba(52, 94, 169);
  top: 5px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 14px;
  line-height: 26px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.topVideo {
  height: 21%;
  margin-bottom: 1.5%;
}
.bottomVideo {
  height: 13.4%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 5px;
  margin-bottom: 1.5%;
}
@media screen and (max-width: 1670px) {
  .lf-isOpen {
    width: 26%;
    z-index: 2001;
    position: absolute;
    left: 15px;
    top: 38px !important;
    background: rgba(9, 36, 74, 0);
    height: 93%;
    box-shadow: none;
  }
  .isOpen {
    position: absolute;
    left: calc(26% + 15px);
    z-index: 9999 !important;
  }
}
/* 当视口高度大于或等于880px时，应用这些样式 */
@media screen and (min-height: 950px) {
  .side-icon {
    top: 40.8%;
  }
}
/* 当视口高度大于或等于880px时，应用这些样式 */
@media screen and (max-height: 750px) {
  .side-icon {
    top: 49% !important;
  }
}
</style>
